<template>
 <div class="div-box-card">
   <el-card class="box-card">
   <!-- 头部信息与新增试题按钮 -->
   <p class="ps">目前支持学科和关键字搜索
      <el-button type="success" size="mini" @click="$router.push('new')">
        <i class="el-icon-edit"></i>
        新增试题
        </el-button>
   </p>

<!-- 表单区域 -->
   <el-form :inline="true"  class="demo-form-inline" size="mini" ref="formData" :model="formData">

     <div>
       <!-- 学科 -->
<el-form-item label="学科"   label-width="68px">
    <el-select placeholder="请选择" v-model="formData.subjectID"  @change="formSubject(formData)">
      <el-option :label="item.label" :value="item.value"  v-for="item in subject" :key="item.value"></el-option>
    </el-select>
  </el-form-item>

<!-- 二级目录 -->
<el-form-item label="二级目录" >
    <el-select placeholder="请选择" v-model="formData.catalogID" @change="formTags(formData)">
      <el-option :value="item.value" :label="item.label" v-for="item in formData.catalog" :key="item.value"></el-option>
    </el-select>
  </el-form-item>

  <!-- 标签 -->
<el-form-item label="标签" label-width="68px" >
    <el-select placeholder="请选择" v-model="formData.tagsId" multiple>
      <el-option :value="item.value" :label="item.label" v-for="item in formData.tags" :key="item.value"></el-option>
    </el-select>
  </el-form-item>

  <!-- 关键字 -->
<el-form-item label="关键字" prop="name" label-width="68px" >
    <el-input placeholder="根据题干搜索" v-model="formData.keyword" style="width:200px"></el-input>
  </el-form-item>
     </div>

<div>
  <!-- 试题类型 -->
<el-form-item label="试题类型" >
    <el-select placeholder="请选择" v-model="formData.questionType">
      <el-option label="单选" value="1"></el-option>
      <el-option label="多选" value="2"></el-option>
      <el-option label="简答" value="3"></el-option>
    </el-select>
  </el-form-item>

  <!-- 难度 -->
<el-form-item label="难度" label-width="68px">
    <el-select placeholder="请选择" v-model="formData.difficulty">
      <el-option label="简单" value="1"></el-option>
      <el-option label="一般" value="2"></el-option>
      <el-option label="复杂" value="3"></el-option>
    </el-select>
  </el-form-item>

  <!-- 方向 -->
<el-form-item label="方向" label-width="68px">
    <el-select placeholder="请选择" v-model="formData.direction">
      <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="index"></el-option>
    </el-select>
  </el-form-item>

  <!-- 录入人 -->
<el-form-item label="录入人" label-width="68px">
    <el-select placeholder="请选择" v-model="formData.creatorID">
      <el-option label="超级管理员" value="超级管理员"></el-option>
      <el-option label="录入管理员" value="录入管理员"></el-option>
    </el-select>
  </el-form-item>
</div>

<div>
  <!-- 题目备注 -->
<el-form-item label="题目备注" prop="name">
    <el-input v-model="formData.remarks" style="width:200px"></el-input>
  </el-form-item>

<!-- 企业简称 -->
<el-form-item label="企业简称" prop="name"  label-width="70px">
    <el-input v-model="formData.shortName" style="width:200px"></el-input>
  </el-form-item>

  <!-- 城市 -->
<el-form-item label="城市" label-width="70px">
    <el-select placeholder="请选择" style="width:97px" v-model="formData.province" @change="changeCitys">
      <el-option v-for="(item,index) in isProvinces" :label="item" :value="item" :key="index"></el-option>
    </el-select>

    <el-select placeholder="请选择" style="width:97px" v-model="formData.city" >
      <el-option v-for="(item,index) in isCitys" :label="item" :value="item" :key="index"></el-option>
    </el-select>
  </el-form-item>

  <!-- 按钮 -->
 <el-form-item >
    <el-button @click="rem" style="margin-left:76px">清除</el-button>
    <el-button type="primary" @click="seek()">搜索</el-button>
  </el-form-item>
</div>

</el-form>

  <el-alert
    :title="'数据一共'+ total + '条' "
    type="info"
    show-icon
    :closable="fa">
  </el-alert>

<!-- 表格 -->
 <el-table style="width: 100%"  :data="tabData" v-loading="loading">
   <!-- 试题编号 -->
<el-table-column

       prop="number"
      label="试题编号"
      width="120">
    </el-table-column>

    <!-- 学科 -->
    <el-table-column

       prop="subject"
      label="学科"
      width="120">
    </el-table-column>

    <!-- 目录 -->
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>

    <!-- 题型 -->
    <el-table-column
       prop="questionType"
      label="题型"
      width="120"
      :formatter="formatquestion">
    </el-table-column>

     <!-- 题干 -->
    <el-table-column
    prop="question"
      label="题干"
    width="170">
<template #default="{row}">
<span v-html="row.question"></span>
</template>
    </el-table-column>

     <!-- 录入时间 -->
     <el-table-column
       prop="addDate"
      label="录入时间"
      width="170">
           <template #default="{row}">
            {{ row.addDate|formatDate('YYYY/MM/DD') }}
          </template>
    </el-table-column>

     <!-- 难度 -->
    <el-table-column
:formatter="formatdifficulty"
       prop="difficulty"
      label="难度"
      width="120">
    </el-table-column>

     <!-- 录入人 -->
    <el-table-column

       prop="creator"
      label="录入人"
      width="120">
    </el-table-column>

    <el-table-column  label="操作" min-width="200px">
      <template #default="{row}">
        <el-button type="primary" icon="el-icon-view" circle size="small" @click="topicPreview(row)" plain></el-button>
        <el-button type="primary" icon="el-icon-edit" circle size="small" @click="modifyTitle(row)" plain></el-button>
        <el-button type="danger" icon="el-icon-delete" circle size="small" @click="del(row)" plain></el-button>
       <el-button type="success" icon="el-icon-check" circle size="small" plain @click="selection(row)"></el-button >
      </template>
    </el-table-column>
 </el-table>
 <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :total="total"
          :current-page="param.page"
          :page-sizes="[5, 7, 8, 10]"
          :page-size="param.pagesize"
          layout="->,total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
        />
      </div>
    </el-card>

    <!-- 预览的dialog -->
 <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="55%"
  :before-close="handleClose"
  @closed="particulars={}">
  <div>
    <el-row>
  <el-col :span="6"><div class="grid-content bg-purple" >【题型】：{{diaQuestionType(particulars.questionType)}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{particulars.id}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div>【难度】：{{diadifficulty(particulars.difficulty)}}</el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【标签】：{{particulars.tags}}</div></el-col>
</el-row>

<el-row>
  <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{particulars.subjectName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{particulars.directoryName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div>【方向】：{{particulars.direction}}</el-col>
</el-row>
  </div>
  <el-divider></el-divider>
  <!-- 题干 -->
  <div>
      <p>【题干】：</p>
      <p v-html="particulars.question"></p>
      <p>{{diaQuestionType(particulars.questionType)}} 选项：（以下选中的选项为正确答案）</p>
      <p v-if="particulars.questionType==='1'">
        <el-row v-for="item in particulars.options" :key="item.id" style="height:52px;width:300px;line-height: 50px">
          <el-radio
          style="display:inline-block"
          label-width="200px"
          :label="item.title"
          :value="item.isRight===1?item.title:''"
          ></el-radio>
          <img
          style="height:50px;vertical-align: middle;float:right"
          v-if="item.img"
          :src="item.img" alt=""
           @click="magnify(item.img)" >
        </el-row>
      </p>
      <p v-if="particulars.questionType==='2'">
        <el-row v-for="k in particulars.options" :key="k.id" style="height:52px;width:300px;line-height: 50px">
          <el-checkbox
          style="display:inline-block"
          label-width="200px"
          :label="k.title"
          :value="k.isRight===1?true:false"
          ></el-checkbox>
          <img
          v-if="k.img"
          style="height:50px;vertical-align: middle;float:right"
          :src="k.img" alt=""
           @click="magnify(k.img)" >
        </el-row>
      </p>
    </div>
  <el-divider></el-divider>
  <!-- 视频答案 -->
  <div>
    <p>【参考答案】：<el-button type="danger" size="small" v-model="isState" @click="isState=true">视频答案预览</el-button></p>
    <!-- 视频  -->
    <video width="420" height="200" controls autoplay v-if="isState">
    <source src="../../assets/MP4/myy.mp4" >
    <object data="movie.mp4" width="320" height="240">
          <!-- <embed width="420" height="200" src="particulars.videoURL"> -->
    </object>
    </video>
  </div>
  <el-divider></el-divider>
  <!-- 答案解析 -->
  <p >【答案解析】：<span v-html="particulars.answer"></span> </p>
  <el-divider></el-divider>
  <!-- 答案备注 -->
  <p>【题目备注】：{{particulars.remarks}}</p>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose" >关闭</el-button>
  </span>
</el-dialog>

<!-- 放大图片的dialog -->
  <el-dialog
  title="提示"
  :visible.sync="dialogMagnify"
  width="25%"
  :before-close="handleCloseMagnify">
  <img :src="img" alt="" style="width:400px;height:300px">
  </el-dialog>

  </div>
</template>

<script>
//  获取题库列表，获取题目详情，  删除题目，  加入精选
import { list, detail, remove, choiceAdd } from '../../api/hmmm/questions'
//  获取简单学科列表
import { simple } from '../../api/hmmm/subjects'
//  方向  题型  难度
import { direction, questionType, difficulty } from '../../api/hmmm/constants'
// 城市
import { provinces, citys } from '../../api/hmmm/citys'
//  获取 简单目录
import { simple as ajaxDetail } from '../../api/hmmm/directorys'
//  获取 简单标签
import { simple as ajaxTags } from '../../api/hmmm/tags'
export default {
  data () {
    return {
      loading: false,
      // isSubject: '', // 显示学科列表
      subject: [], // 学科简单列表
      direction, //  方向的常量
      questionType, // 题型的常量
      difficulty, // 题型的常量
      isProvinces: [], // 城市
      isCitys: [], // 城市下地区
      fa: false,
      // 发送请求需要携带的参数
      param: {
        page: 1, //  当前页
        pagesize: 5 //  当前页的数据条数
      },

      total: 0, // 总数
      dialogVisible: false, // 预览的dialog
      particulars: {}, // 文章详情
      isState: false, // 显示视频
      dialogMagnify: false, // 放大图片
      img: '', // 图片地址

      formData: {
        subjectID: '', // 学科
        catalog: [], // 二级目录
        catalogID: '', // 二级目录的id
        tagsId: '',
        tags: [], //  标签
        keyword: '', //  关键字
        questionType: '', //  试题类型
        difficulty: '', //  难度
        direction: '', //  方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 所在市
        city: '' // 所在县
      },
      isAllTabData: [], // 所有数据
      // 当前页数据
      tabData: [
        {
          addDate: '2020-05-05T09:12:52.000Z', // 时间
          answer: '<p>无</p>', // 答案解析
          catalog: 'css基础',
          catalogID: 5, // 目录
          city: '和平区', // 所在县
          creator: '超级管理员', // 录入人
          creatorID: 2,
          difficulty: '1',
          direction: '企业服务', //  方向
          enterprise: '美团', // 企业
          enterpriseID: 12,
          id: 29,
          number: 'ck9tp300z0001kwo5hztbh95s', // 试题编号
          question: '<p>1+1等于几？</p>', // 题干
          questionType: '1', // 题型
          remarks: '无', //  题目备注
          subject: '前端', //  学科
          subjectID: 4, //
          tags: 'css3,bfc' //  试题标签
        }
      ]
    }
  },

  created () {
    // 调用获取学科简单列表的函数
    this.subjectPlain()
    //  调用获取题库列表的函数
    this.getQuestionBank()
    this.isProvinces = provinces()
  },

  methods: {
    // 定义获取学科简单列表的函数
    async subjectPlain () {
      const { data } = await simple()
      this.subject = data
    },

    // 选择学科后获取目录列表
    async formSubject (item) {
      const { data } = await ajaxDetail(item)
      this.formData.catalog = data
      this.formData.catalogID = ''
      this.formData.tagsId = ''
    },

    // x选择目录后获取标签列表
    async formTags (item) {
      const { data } = await ajaxTags(item)
      this.formData.tags = data
    },

    // 获取城市下地区
    changeCitys (city) {
      this.isCitys = citys(city)
    },

    // 定义获取题库列表的函数  /////////////////////////////////////
    async getQuestionBank () {
      //  如果学科有值
      this.loading = true
      if (this.formData.subjectID !== '') {
        //  就赋值给发送请求需要携带的参数
        this.param.subjectID = this.formData.subjectID
      }
      //  如果关键字有值
      if (this.formData.keyword !== '') {
        //  就赋值给发送请求需要携带的参数
        this.param.keyword = this.formData.keyword
      }
      const { data } = await list(this.param)
      // 当前页
      this.tabData = data.items
      this.total = data.counts
      this.loading = false
    },

    // 清空表单
    rem () {
      this.formData = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', //  标签
        keyword: '', //  关键字
        questionType: '', //  试题类型
        difficulty: '', //  难度
        direction: '', //  方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 所在市
        city: '' // 所在县
      }
      this.param = {
        page: 1, //  当前页
        pagesize: 5 //  当前页的数据条数
      }
    },

    // 搜索
    async seek () {
      this.getQuestionBank()
    },

    //  每页多少条
    handleSizeChange (size) {
      this.param.size = size
      // 跳转到第一页
      this.param.page = 1
      // 刷新页面
      this.getQuestionBank()
    },

    //  下一页
    handleCurrentChange (page) {
      this.param.page = page
      this.getQuestionBank()
    },

    // 点击预览
    async topicPreview (row) {
      this.dialogVisible = true
      // 获取题目详情
      const { data } = await detail(row)
      this.particulars = data
    },

    // 关闭预览的dialog
    handleClose () {
      this.dialogVisible = false
      // 关闭视频
      this.isState = false
    },

    // 放大图片
    magnify (img) {
      this.img = img
      this.dialogMagnify = true
    },

    //  关闭放大图片
    handleCloseMagnify () {
      this.dialogMagnify = false
    },

    // 点击修改
    async modifyTitle (row) {
      await detail(row)
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },

    //  点击删除
    async del (row) {
      try {
        await this.$confirm('确定删除吗', '温馨提示', { type: 'warning' })
        await remove(row)
        // 删除成功提示
        this.$message.success('删除成功')
        //  如果当前页条数只有1条，并且不在第1页，page--
        if (this.tabData.length === 1 && this.param.page > 1) {
          this.param.page--
        }
        //  刷新页面
        this.getQuestionBank()
      } catch (error) {
        console.log(error)
      }
    },

    // 精选
    async selection (row) {
      try {
        row.choiceState = 1
        await this.$confirm('确定加入精选吗', '温馨提示')
        await choiceAdd(row)

        // 添加精选成功提示
        this.$message.success('添加精选成功')
        //  刷新页面
        this.getQuestionBank()
      } catch (error) {
        console.log(error)
      }
    },

    // 格式化  题型
    formatquestion (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    // 格式化难度
    formatdifficulty (row, column, cellValue, index) {
      const res = difficulty.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    diaQuestionType (k) {
      const res = questionType.find((item) => item.value === +k)
      return res ? res.label : '未知'
    },

    diadifficulty (k) {
      const res = difficulty.find((item) => item.value === +k)
      return res ? res.label : '未知'
    }
  }
}
</script>

<style scoped lang="css">
.div-box-card {
  padding: 20px;
}
.ps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffc5da;
  font-size: 12px;
}

i .el-icon-view {
  font-size: 20px !important;
}

 ::v-deep .el-table__header-wrapper {
  margin-top: 15px;
}

::v-deep .el-pagination {
  margin-top: 15px;
}
</style>
